var Script = function () {

    //  tracking chart

    var plot;

    //    selection chart

    // BARS CHART
    $(function () {
        // data

        var data = [];
        var i = 1;

        var etiqueta; var valor;

        $("#tablaGrafico tr.valores").each(function () {
            etiqueta = $(this).find(".etiqueta").html();
            valor = $(this).find(".datos").html();
            //alert(valor);

            data.push({ label: etiqueta, data: [[i, valor]] });
            i++;
        });

        //var data = [
        // { label: "Enero", data: [[1, 15]] },
        // { label: "Febrero", data: [[2, 10]] },
        // { label: "Marzo", data: [[3, 5]] },
        //];

        
        var optionsBars = {
            series: {
                bars: {
                    show: true,
                    label: {
                        show: true
                    }
                }
            },
            grid: {
                hoverable: true,
                clickable: true
            },
            legend: { noColumns: 1 },
            xaxis: { tickDecimals: 0 },
            yaxis: { min: 0 },
            selection: { mode: "x" },
            stack: false
        };
        
        var optionsPie = {
            series: {
                pie: {
                    show: true,
                    radius: 3 / 4,
                    innerRadius: 0.4,
                    label: {
                        show: true,
                        threshold: 0.000000000001,
                        formatter: function (label, series) {
                            return '<div style="text-align:center;padding:5px;color:' + series.color + '">' +
                            label + ' => ' +
                            Math.round(series.percent, 4) +
                            '%</div>';
                        }
                        //,
                        //background:{ color: '#333',opacity: 0.2 }
                    }
                }
            },
            grid: {
                hoverable: true,
                clickable: true
            },
            legend: { noColumns: 1 },
            xaxis: { tickDecimals: 0 },
            yaxis: { min: 0 },
            selection: { mode: "x" },
            stack: false
        };

        var placeholder = $("#chart-2");

        placeholder.bind("plotselected", function (event, ranges) {
            $("#selection").text(ranges.xaxis.from.toFixed(1) + " to " + ranges.xaxis.to.toFixed(1));

            var zoom = $("#zoom").attr("checked");
            if (zoom)
                plot = $.plot(placeholder, data,
                    $.extend(true, {}, options, {
                        xaxis: { min: ranges.xaxis.from, max: ranges.xaxis.to }
                    }));
        });

        //var plot = $.plot(placeholder, data, options);
        var plot;
        var claseChart = placeholder.attr('class');

        //if (claseChart.indexOf("Bar") >= 0) {
        //    plot = $.plot(placeholder, data, optionsBars);
        //}
        //if (claseChart.indexOf("Pie") >= 0) {
        //    plot = $.plot(placeholder, data, optionsPie);
        //}

        $("#clearSelection").click(function () {
            plot.clearSelection();
        });

        $("#setSelection").click(function () {
            plot.setSelection({ xaxis: { from: 1994, to: 1995 } });
        });
    });

    //    bar chart

    $(function () {
        var d1 = [];
        for (var i = 0; i <= 10; i += 1)
            d1.push([i, 100]);

        var d2 = [];
        for (var i = 0; i <= 10; i += 1)
            d2.push([i, parseInt(Math.random() * 30)]);

        var d3 = [];
        for (var i = 0; i <= 10; i += 1)
            d3.push([i, parseInt(Math.random() * 30)]);

        var stack = 0, bars = true, lines = false, steps = false;

        function plotWithOptions() {
            //$.plot($("#chart-5"), [d1, d2, d3], {
            //    series: {
            //        stack: stack,
            //        lines: { show: lines, fill: true, steps: steps },
            //        bars: { show: bars, barWidth: 0.6 }
            //    }
            //});
        }

        plotWithOptions();

        $(".stackControls input").click(function (e) {
            e.preventDefault();
            stack = $(this).val() == "Apilar" ? true : null;
            plotWithOptions();
        });
        $(".graphControls input").click(function (e) {
            e.preventDefault();
            bars = $(this).val().indexOf("Barra") != -1;
            lines = $(this).val().indexOf("Linea") != -1;
            steps = $(this).val().indexOf("pasos") != -1;
            plotWithOptions();
        });
    });
}();